<template>
  <div class="aside">
    <el-drawer
      :title="fill"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      append-to-body
      @close="close"
    >
      <slot name="aside"></slot>
      <!-- <el-form
        label-position="top"
        ref="form"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="">
              <slot name="input"></slot>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="">
              <slot name="input"></slot>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <slot name="select"></slot>
          </el-col>
          <el-col :span="10">
            <slot name="select"></slot>
          </el-col>
        </el-row>

        <el-form-item class="anniu">
          <el-button size="small">取消</el-button>
          <el-button size="small" type="primary">确定</el-button>
        </el-form-item>
      </el-form> -->
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "aside-view",
  data() {
    return {
      drawer: false,
      id:''
    };
  },
  computed: {
    fill() {
      return this.id ? '修改' : '新增'
    }
  },
  methods: {
    handleClose() {},
    close(){
      this.$emit('close')
    }
  },
};
</script>

<style lang="scss" scoped>

::v-deep .el-input__inner {
  width: 300px;
  height: 32px !important;
  margin-top: 5px;
}

// .el-row {
//   margin-bottom: 20px;
//   &:last-child {
//     margin-bottom: 0;
//   }
// }
// .el-col {
//   border-radius: 4px;
//   margin-left: 30px;
// }
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
// .grid-content {
//   border-radius: 4px;
//   min-height: 36px;
// }
// .row-bg {
//   padding: 10px 0;
//   background-color: #f9fafc;
// }
</style>